<template>
  <div class="sidebar">
    <div class="menu">
      <p class="title">云技术管理</p>
      <ul>
        <li><router-link to="/cloud-server">云服务器</router-link></li>
        <li><router-link to="/cloud-db">云数据库</router-link></li>
        <li><router-link to="/load-balancing">负载均衡</router-link></li>
      </ul>
    </div>
    <div class="menu">
      <p class="title">安全管理</p>
      <ul>
        <li><router-link to="/cloud-shield">云顿控制台</router-link></li>
        <li><router-link to="/ddos-ip">DDoS高仿IP</router-link></li>
        <li><router-link to="web-firewall">Web应用防火墙</router-link></li>
        <li><router-link to="ca-certificate">CA证书服务</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
export default {};
</script>

<style scoped>
.sidebar {
  width: 200px;
  position: absolute;
  padding: 10px;
}
.title{
  font-size: 25px;
  font-weight: 800;
  margin: 0;
  color: white;
  background-color: #3185bf;
  padding: 15px 20px;
}
ul{
  background-color: #f1f1f1;
}
ul li{
  display: block;
}
ul li a{
  color: black;
  display: block;
  height: 100%;
  transition: all .5s ease;
  padding: 10px;
}
ul li a:hover{
  color: white;
  background-color: #3185bf;
}
</style>
